<template>
  <div class="cenn">
    <div class="fr page">
      <div class="sui-pagination clearfix">
        <!-- {{startNumAndEndNum}} -->
        <ul>
          <li class="prev " :class="pageNo==1?'disabled':''" @click="$emit('getPageNo',pageNo-1)">
            <a>«上一页</a>
          </li>
          <li v-if="startNumAndEndNum.start > 1"  @click="$emit('getPageNo',1)">
            <a>1</a>
          </li>
          <li class="dotted" v-if="startNumAndEndNum.start > 2">
            <span>...</span>
          </li>
          <li
            :class="page == pageNo ? 'active' : ''"
            v-for="(page, index) of startNumAndEndNum.end"
            :key="index"
            v-show="page >= startNumAndEndNum.start"
            @click="$emit('getPageNo',page)"
          >
            <a>{{ page }}</a>
          </li>
          <li class="dotted" v-if="startNumAndEndNum.end < totalPage - 1">
            <span>...</span>
          </li>
          <li @click="$emit('getPageNo',totalPage)">
            <a v-if="startNumAndEndNum.end < totalPage">{{ totalPage }}</a>
          </li>
          <li class="next" :class="pageNo==totalPage?'disabled':''" @click="$emit('getPageNo',pageNo+1)">
            <a>下一页»</a>
          </li>
        </ul>
        <div>
          <span>共{{ totalPage }}页&nbsp;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["pageNo", "pageSize", "total", "continues"],
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    startNumAndEndNum() {
      let start = 0;
      let end = 0;
      start = this.pageNo - parseInt(this.continues / 2);
      end = this.pageNo + parseInt(this.continues / 2);
      if (start < 1) {
        start = 1;
        end = this.continues;
      }
      if (end > this.totalPage) {
        start = this.totalPage - this.continues + 1;
        end = this.totalPage;
      }

      return {
        start,
        end,
      };
    },
  },
};
</script>

<style scoped lang="less">
.cenn {
  text-align: center;
}
.page {
  height: 66px;
  overflow: hidden;
  min-width: 500px;
  max-width: 1000px;
  display: inline-block;
  .sui-pagination {
    margin: 18px 0;

    ul {
      margin-left: 0;
      margin-bottom: 0;
      vertical-align: middle;
      min-width: 490px;
      float: left;
      li {
        line-height: 18px;
        display: inline-block;

        a {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          background-color: #fff;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
        }

        &.active {
          a {
            background-color: #fff;
            color: #e1251b;
            border-color: #fff;
            cursor: default;
          }
        }

        &.prev {
          a {
            background-color: #fafafa;
          }
        }

        &.disabled {
          a {
            color: #999;
            cursor: default;
          }
        }

        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }

        &.next {
          a {
            background-color: #fafafa;
          }
        }
      }
    }

    div {
      color: #333;
      font-size: 14px;
      float: right;
      width: 100px;
      margin-top: 10px;
    }
  }
}
</style>